﻿@model IEnumerable<GZNest.Entity.Spin.System.Machine>

@{
    ViewBag.Title = "Machine List";
}

@*<p>
    @Html.ActionLink("Create New", "Create")
</p>*@

@*Main content*@
 
<div class="row">
    <div class="col-md-6">
        <div class="panel panel-default ">
            <div class="panel-heading">
                Machine Overview                
            </div>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Enabled</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: machines">
                    <tr>
                        <td data-bind="text: Id"></td>
                        <td data-bind="text: Name"></td>
                        <td ><input type="checkbox" data-bind="checked: Enabled" disabled="disabled" /></td>
                        <td data-bind="text: Description"></td>
                        <td>
                            <button data-bind="click: $root.edit" class="btn btn-primary btn-sm">Edit</button>
                            <button data-bind="click: $root.delete" class="btn btn-danger btn-sm">Delete</button>
                        </td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>
</div>
<div class="row text-left">
    <button data-bind="click: $root.add" class="btn btn-primary btn-sm">Create New</button>
</div>
<div class="modal fade" id="AddMachine" tabindex="-1" role="dialog" aria-labelledby="AddMachine" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
            </div>
            <div class="modal-body">
                <div data-bind="ifnot: Machine()">
                    <div>
                        <h2>Add New Machine</h2>
                    </div>
                    <div>
                        <label for="name">Name</label>
                        <input data-bind="value: $root.Name" type="text" title="Name" />
                    </div>

                    <div>
                        <label for="Enabled">Enabled</label>
                        <input data-bind="checked: $root.Enabled" type="checkbox" title="Enabled" />
                    </div>

                    <div>
                        <label for="Description">Description</label>
                        <input data-bind="value: $root.Description" type="text" title="Description" />
                    </div>
                    <br />
                    <div>
                        @*<button data-bind="click: $root.create">Save</button>
                        <button data-bind="click: $root.reset">Reset</button>*@

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bind="click: $root.create">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: $root.cancel">Cancel</button>
                
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="EditMachine" tabindex="-1" role="dialog" aria-labelledby="EditMachine" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Edit Machine</h4>
            </div>
            <div class="modal-body">
                <div data-bind="if: Machine">
                    <div>
                        <label for="name">Name</label>
                        <input data-bind="value: Machine().Name" type="text" title="Name" />
                    </div>

                    <div>
                        <label for="Enabled">Enabled</label>
                        <input data-bind="checked: Machine().Enabled" type="checkbox" title="Enabled" />
                    </div>

                    <div>
                        <label for="Description">Description</label>
                        <input data-bind="value: Machine().Description" type="text" title="Description" />
                    </div>
                    <br />
                    <div>
                        @*<button data-bind="click: $root.create">Save</button>
                        <button data-bind="click: $root.reset">Reset</button>*@
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bind="click: $root.update">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click: $root.cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        function MachineManagerModel() {
            self = this;

            //Declare observable which will be bind with UI
            self.Id = ko.observable("");
            self.Name = ko.observable("");
            self.Enabled = ko.observable(false);
            self.Description = ko.observable("");

            var Machine = {
                Id: self.Id,
                Name: self.Name,
                Enabled: self.Enabled,
                Description: self.Description
            };

            // Initialize the view-model
            $.ajax({
                url: '@Url.Action("GetAllMachines", "Machine")',
                cache: false,
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                data: {},
                success: function (data) {
                    self.machines(data); //Put the response in ObservableArray
                }
            });

            self.machines = ko.observableArray();//// Contains the list of products
            self.Machine = ko.observable();

            self.add = function () {
                self.Machine(null);
                $('#AddMachine').modal();
            };
            //Add New Item
            self.create = function () {
                if (Machine.Name() != "") {
                    $.ajax({
                        url: '@Url.Action("AddMachine", "Machine")',
                        cache: false,
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        data: ko.toJSON(Machine),
                        success: function (data) {
                            // alert('added');
                            self.machines.push(data);
                            $('#AddMachine').modal('hide');
                            self.Machine(null);

                            //self.Name("");
                            //self.Enabled("");
                            //self.Description("");
                        }
                    }).fail(
                         function (xhr, textStatus, err) {
                             alert(err);
                         });
                }
                else {
                    alert('Please Enter All the Values !!');
                }

            }

            // Delete product details
            self.delete = function (Machine) {
                if (confirm('Are you sure to Delete "' + Machine.Name + '" machine ??')) {
                    $.ajax({
                        url: '@Url.Action("DeleteMachine", "Machine")',
                        cache: false,
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        data: ko.toJSON(Machine),
                        success: function (data) {
                            self.machines.remove(Machine);
                            //   alert("Record Deleted Successfully");
                        }
                    }).fail(
                     function (xhr, textStatus, err) {
                         alert(err);
                         alert(xhr);
                         alert(textStatus);
                     });
                }
            }

            // Edit product details
            self.edit = function (Machine) {
                self.Machine(Machine);
                $('#EditMachine').modal();
            }

            // Update product details
            self.update = function () {

                var machine = self.Machine();

                $.ajax({
                    url: '@Url.Action("UpdateMachine", "Machine")',
                    cache: false,
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: ko.toJSON(machine),
                    success: function (data) {
                        
                        self.machines.removeAll();
                        self.machines(data); //Put the response in ObservableArray
                        $('#EditMachine').modal('hide');
                        self.Machine(null);
                        //alert("Record Updated Successfully");
                    }
                })
            .fail(
            function (xhr, textStatus, err) {
                alert(err);
            });
            }


            // Reset product details
            self.reset = function () {
                self.Name("");
                self.Enabled(false);
                self.Description("");
            }

            // Cancel product details
            self.cancel = function () {
                self.Machine(null);
            }
        }

        var viewModel = new MachineManagerModel();
        ko.applyBindings(viewModel);
    </script>
}
